<template>
  <div class="page-task">
    <div class="page-task-header"></div>
    <div class="page-task-header">
      <pk-searchFrom :config="config" @onSearch="onSearch"></pk-searchFrom>
    </div>
    <div class="mt-12 mb-12">
      <div><pk-button size="default" type="primary" :icon="Plus" @click="hanlderAdd">添加</pk-button></div>
    </div>
    <div class="page-task-body">
      <pk-table :tableConfig="tableConfig" :data="tableData" @onSize="onSize" :total="total">
        <template #pingfen="{row}">
          <div>{{row.markScoreNum}} / {{row.evaluatorNum}}</div>
        </template>
        <template #status="{row}">
          <div v-if="row.status == 0">草稿</div>
          <div v-if="row.status == 1">已发布</div>
          <div v-if="row.status == 2">已结束</div>
        </template>
        <template #optionsType="{row}">
          <div v-if="row.optionsType == 1">单选</div>
          <div v-if="row.optionsType == 2">多选</div>
        </template>
        <template #showType="{row}">
          <div v-if="row.showType == 1">下拉</div>
          <div v-if="row.showType == 2">平铺</div>
        </template> 
        <template #options="{row}">
         <div class="flex-row">
            <div class="mr-8" v-if="row.status == 1  "><pk-button  size="small" type="primary" @click="HandlerBindEdit(row)">查看</pk-button></div>
            <div class="mr-8" v-if="row.status == 1  ">

              <el-popconfirm
                class="box-item"
                title="确定要结束任务?"
                placement="top"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="HandlerBindEnd(row, 2)"
              >
                <template #reference>
                  <pk-button  type="danger" size="small">结束任务</pk-button>
                </template>
              </el-popconfirm> 
            </div>
            <div class="mr-8" v-if="row.status == 2"> 
              <el-popconfirm
                class="box-item"
                title="确定要开启任务?"
                placement="top"
                confirm-button-text="确定"
                cancel-button-text="取消"
                @confirm="HandlerBindEnd(row, 1)"
                width='200'
              >
                <template #reference>
                  <pk-button  type="danger" size="small">开启任务</pk-button>
                </template>
              </el-popconfirm> 
              </div>
            <div class="mr-8" v-if="row.status == 0 "><pk-button size="small" type="primary" :icon="Edit" @click="HandlerBindEdit(row)">编辑</pk-button></div>
            <div class="mr-8" v-if="row.status !=0 "><pk-button size="small" type="primary" :icon="View" @click="HandlerBindView(row)">评分</pk-button></div>
            <div class="mr-8" v-if="row.status ==2">
              <el-popconfirm
                  class="box-item"
                  title="确定要删除?"
                  placement="top"
                  confirm-button-text="确定"
                  cancel-button-text="取消"
                  @confirm="setDel(row)"
                >
                  <template #reference>
                    <pk-button type="danger" size="small">删除</pk-button>
                  </template>
                </el-popconfirm>
              </div>
          </div>
        </template>
      </pk-table>
    </div>
    <div></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import pkSearchFrom from '@/components/pkui/pk-searchItem/pk-searchItem.vue'
import pkTable from '@/components/pkui/pk-table/pk-table.vue'
import pkButton from '@/components/pkui/pk-button/pk-button.vue'
import { Back, View, Plus,Edit } from '@element-plus/icons-vue'
import { taskPage, taskDel, taskUpdateStatus } from '@/api/api'
import { useRouter } from 'vue-router'
import { getTime } from '@/utils/utils'
const router = useRouter()
const total = ref(0)
const querySearch = ref({})
const page = ref({
  pageNum: 1,
  pageSize: 10
})
const config = ref([
  {
    label: '名称',
    type: 'input',
    prop: 'name'
  },
  {
    label: '状态',
    type: 'select',
    prop: 'status',
    options: [
      {
        label: '草稿',
        value: 0
      },
      {
        label: '已发布',
        value: 1
      },
      {
        label: '已结束',
        value: 2
      }
    ]
  }, 
])
const tableData = ref([])
const tableConfig = ref([
  {
    label: '序号',
    type: 'index'
  },
  {
    label: '任务名称',
    prop: 'taskName',
    minWidth: '220px'
  },
  {
    label: '评分人数',
    prop: 'weight',
    type: 'slot',
    slotName: 'pingfen',
    width: '100px'
  },
  {
    label: '状态',
    prop: 'status',
    type: 'slot',
    slotName: 'status',
    width: '100px'
  },
  {
    label: '评分选择',
    prop: 'optionsType',
    type: 'slot',
    slotName: 'optionsType',
    width: '100px'
  },
  {
    label: '展示形式',
    prop: 'showType',
    type: 'slot',
    slotName: 'showType',
    width: '100px'
  },
  {
    label: '创建时间',
    prop: 'creatorTime',
    width: '170px'
  },
  {
    label: '更新时间',
    prop: 'lastModifyTime',
    width: '170px'
  },
  {
    label: '操作',
    type: 'slot',
    slotName: 'options',
    fixed: 'right',
    width: '240px'
  }
])

const HandlerBindEnd = (e, status) => {
  taskUpdateStatus({
    id: e.id,
    status: status
  }).then(res => {
    getList()
  })
}

const hanlderAdd = () => {
  router.push({
    path: '/admin/addtask'
  })
}

const HandlerBindView = (e) => {
  router.push({
    path: '/admin/taskdetail',
    query: {
      id: e.id
    }
  })
}


const setDel = (e) => {
  taskDel({
    id: e.id
  }).then(res => {
    getList()
  })
}

const onSearch = (e = {}) => {
  querySearch.value = e
  getList()
}

const onSize = (e) => {
  page.value.pageNum = e.page
  getList()
}

const HandlerBindEdit = (e) => {
  router.push({
    path: '/admin/addtask',
    query: {
      id: e.id
    }
  })
}

const getList = () => {
  taskPage({
    ...page.value,
    ...querySearch.value
  }).then(res => {
    total.value = res.resData.count
    tableData.value = res.resData.data.map(item => {
      return {
        ...item,
        creatorTime: getTime(item.creatorTime / 1000, 'time'),
        lastModifyTime: getTime(item.lastModifyTime / 1000, 'time')
      }
    })
  }).catch(err => {
    console.log(err)
  })
}

onMounted(() => {
  getList()
})

</script>

<style lang="scss" scoped>

</style>